<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
    <el-form-item label="图片排序" prop="imageSort">
      <el-input v-model="ruleForm.imageSort"></el-input>
    </el-form-item>
    <el-form-item label="图片名称" prop="imageName">
      <el-input v-model="ruleForm.imageName"></el-input>
    </el-form-item>
    <el-form-item label="图片类型" prop="imageType">
      <el-radio-group v-model="ruleForm.imageType">
        <el-radio label="1">轮播图</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否在首页显示" prop="showIndex">
      <el-radio-group v-model="ruleForm.showIndex">
        <el-radio label="1">是</el-radio>
        <el-radio label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="图片地址" prop="imagePath">
      <el-upload
        class="upload-demo"
        action="http://backendapp.vacomall.cn/index/add"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :multiple="false"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="跳转链接" prop="imageLink">
      <el-input v-model="ruleForm.imageLink"></el-input>
    </el-form-item>
    <el-form-item label="图片描述" prop="imageDesc" type="textarea">
      <el-input v-model="ruleForm.imageDesc" type="textarea"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="formType==='update'?updateForm('ruleForm'):submitForm('ruleForm')"
                 :loading="submitStatus">确定
      </el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import * as types from '../../store/mutations-type'
  import api from '../../store/api'
  var format = require('../../util/util')
  import axios from 'axios'
  export default {
    data () {
      return {
        handle: 'add',
        id: '',
        submitStatus: false,
        rules: {
          imageSort: [
            {required: true, message: '请请输入图片排序', trigger: 'blur'},
            {pattern: /^[1-9]\d*$/, message: '输入1-9数字'}
          ],
          imageName: [
            {required: true, message: '请输入图片名称', trigger: 'blur'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ],
          imageType: [
            {required: true, message: '请输入图片类型', trigger: 'blur'}
          ],
          imagePath: [
            {required: true, message: '请上传图片', trigger: 'blur'}
          ],
          imageLink: [
            {required: true, pattern: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-,@?^=%&:/~#]*[\w\-?^=%&/~#])?/, message: '请输入正确的跳转链接', trigger: 'blur'}
          ],
          imageDesc: [
            {message: '请输入图片描述', trigger: 'change'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ],
          showIndex: [
            {required: true, message: '请选择状态', trigger: 'change'}
          ]
        }
      }
    },
    props: ['ruleForm', 'formType', 'getTableData'],
    methods: {
      handlePreview (file) {
        console.log(file)
      },
      handleSuccess (result) {
        this.ruleForm.imagePath = result.data
      },
      handleRemove (file, fileList) {
        file.response.data = ''
      },
      submitForm (formName) {
        this.submitStatus = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var ruleForm = this.ruleForm
            ruleForm = format.formatString(ruleForm)
            axios.post(api.imagesAdd, ruleForm).then(response => {
              var result = response.data
              if (result.success) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.submitStatus = false
                this.$store.dispatch(types.ROLL_CLOSE_FORM)
                this.$store.dispatch(types.BRAND_CLOSE_FORM)
                this.$store.dispatch(types.CATEGORY_CLOSE_FORM)
                this.resetForm(formName)
              } else {
                this.submitStatus = false
                this.$message.error({
                  title: '错误',
                  message: result.message
                })
              }
              this.getTableData()
            }, (err) => {
              this.$message.error({
                title: '错误',
                message: err.response.data.message
              })
              this.submitStatus = false
            })
          } else {
            this.submitStatus = false
            console.log('error submit!!')
            return false
          }
        })
      },
      updateForm (formName) {
        this.submitStatus = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var ruleForm = this.ruleForm
            ruleForm = format.formatString(ruleForm)
            axios.post(api.imagesUpdate + '?' + ruleForm).then(response => {
              var result = response.data
              if (result.success) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.submitStatus = false
                this.$store.dispatch(types.ROLL_CLOSE_FORM)
                this.$store.dispatch(types.BRAND_CLOSE_FORM)
                this.$store.dispatch(types.CATEGORY_CLOSE_FORM)
                this.resetForm(formName)
              } else {
                this.submitStatus = false
                this.$message.error({
                  title: '错误',
                  message: result.message
                })
              }
              this.getTableData()
            })
          } else {
            this.submitStatus = false
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    mounted () {
    }
  }
</script>
<style>
  .demo-ruleForm {
    width: 440px;
  }
</style>

